<template>
	<div id="ZhuZhuangTu04"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Column } from '@antv/g2plot'

const data = [
	{
		status: '一般废物',
		lineName: '产废口1',
		value: 502
	},
	{
		status: '危险废物',
		lineName: '产废口1',
		value: 109
	},
	{
		status: '一般废物',
		lineName: '产废口2',
		value: 1402
	},
	{
		status: '危险废物',
		lineName: '产废口2',
		value: 668
	},
	{
		status: '一般废物',
		lineName: '产废口3',
		value: 106
	},
	{
		status: '危险废物',
		lineName: '产废口3',
		value: 41
	},
	{
		status: '一般废物',
		lineName: '产废口4',
		value: 433
	},
	{
		status: '危险废物',
		lineName: '产废口4',
		value: 167
	},
	{
		status: '一般废物',
		lineName: '产废口5',
		value: 1766
	},
	{
		status: '危险废物',
		lineName: '产废口5',
		value: 203
	},
	{
		status: '一般废物',
		lineName: '产废口6',
		value: 276
	},
	{
		status: '危险废物',
		lineName: '产废口6',
		value: 147
	}
]

onMounted(() => {
	const columnPlot = new Column('ZhuZhuangTu04', {
		data,
		xField: 'lineName',
		yField: 'value',
		seriesField: 'status',
		isPercent: true,
		isStack: true,
		label: {
			position: 'middle',
			content: (item) => {
				return item.value.toFixed(2)
			},
			style: {
				fill: '#fff'
			}
		},
		minColumnWidth: 20,
		maxColumnWidth: 30,
	})

	columnPlot.render()
})
</script>

<style scoped></style>
